<!-- 1 定义组件模版 -->
<template>
    <div class="goodsApp">
        进货信息
        <fieldset>
            <legend>商品名称:</legend>
            <input type="text" v-model="cartStore.name" />
        </fieldset>
        <fieldset>
            <legend>商品单价:</legend>
            <input type="text" v-model="cartStore.price" />
        </fieldset>
        <fieldset>
            <legend>数量:</legend>
            <button type="button" style="border-radius: 2px; background-color: rgb(144, 156, 166);padding: 5px;"
                @click="increament(1)">+</button>

            <input type="text" v-model="cartStore.count" />

            <button type="button" style="border-radius: 2px; background-color: rgb(144, 156, 166);padding: 5px;"
                @click="increament(-1)">-</button>
        </fieldset>
        <fieldset>
            <legend>商品总价:</legend>
            {{ amount }}
        </fieldset>
    </div>
</template>

<!-- 2 定义组件逻辑 -->
<script setup lang="ts" name="PiniaDemo1">
import { computed, ref } from 'vue';
import { useCart } from '@/store/cart'

//使用Pinia框架
let cartStore = useCart()


//可以简单理解为 cartStore 是一个小数据库
console.log("cartStore", cartStore);



//定义数据
// let name = ref('魔方法式软面包')
// let price = ref(19.8)
// let count = ref(1)

//计算属性
let amount = computed(() => {
    return (cartStore.price * cartStore.count).toFixed(2)
})


function increament(num: number) {
    cartStore.count += num
}

</script>

<!-- 3 定义样式 -->
<style scoped>
.goodsApp {
    width: 500px;
}


input[count] {
    width: 40px;
    text-align: center;
}
</style>